<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Multi-directional document test</title>

	<style type="text/css">
		@import "../../dojo/resources/dojo.css";
		@import "css/dijitTests.css";
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../dojo/dojo.js"
		djConfig="parseOnLoad: true, extraLocale: ['en','ar','he'], isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dojo.data.ItemFileReadStore");

		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Tree");
		dojo.require("dijit.tree.ForestStoreModel");

		dojo.require("dijit.Menu");
		dojo.require("dijit.MenuItem");
		dojo.require("dijit.PopupMenuItem");

		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.DropDownButton");
		dojo.require("dijit.form.ComboButton");
		dojo.require("dijit.form.ToggleButton");

		dojo.require("dijit.ColorPalette");
		dojo.require("dijit.Toolbar");
		dojo.require("dijit.TooltipDialog");

		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dijit.form.ComboBox");

		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.layout.ContentPane");

		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>

</head>
<body class="claro">

	<h1 class="testTitle">Multi-directional document test</h1>

	<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
		url="_data/countries.json"></div>
	<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel"
		store="continentStore" query="{type:'continent'}"
		rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div>

	<div id="right" dir="rtl" lang="ar-eg" style="float: right; width: 500px;">
		<h2>RTL</h2>

		<div dojoType="dijit.Toolbar"
				><div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div
				><div dojoType="dijit.form.DropDownButton" iconClass="plusIcon" showLabel="true">
					<span>שיח</span>
					<div dojoType="dijit.TooltipDialog" title="Enter Login information">
						<table>
							<tr>
								<td><label for="user">שם:</label></td>
								<td><input dojoType=dijit.form.TextBox></td>
							</tr>
							<tr>
								<td><label for="pwd">תאריך:</label></td>
								<td><input dojoType=dijit.form.DateTextBox></td>
							</tr>
							<tr>
								<td><label for="pwd">גיל:</label></td>
								<td><input dojoType=dijit.form.NumberSpinner></td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<button dojoType=dijit.form.Button type="submit" name="submit">כניסה</button></td>
							</tr>
						</table>
					</div
				></div
				><div dojoType="dijit.form.DropDownButton" iconClass="dijitEditorIcon dijitEditorIconBackColor" showLabel="true">
					<span>لوحة الألوان</span>
					<div dojoType="dijit.ColorPalette" style="display: none" palette="7x10" onChange="console.log(this.value);"></div>
				</div
				><div dojoType="dijit.form.ComboButton" optionsTitle='save options' iconClass="plusIcon" showLabel="true">
					<span>القائمة</span>
					<div dojoType="dijit.Menu" style="display: none;">
						<div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave">حفظ</div>
						<div dojoType="dijit.MenuItem">حفظ ك</div>
						<div dojoType="dijit.PopupMenuItem">
							<span>فرعية</span>
							<div dojoType="dijit.Menu">
								<div dojoType="dijit.MenuItem">Submenu Item One</div>
								<div dojoType="dijit.MenuItem">Submenu Item Two</div>
								<div dojoType="dijit.PopupMenuItem">
									<span>Deeper Submenu</span>
									<div dojoType="dijit.Menu">
										<div dojoType="dijit.MenuItem">Sub-sub-menu Item One</div>
										<div dojoType="dijit.MenuItem">Sub-sub-menu Item Two</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div
		></div>
		<div dojoType="dijit.layout.TabContainer" style="width: 450px; height: 300px; margin-top: 1em;">
			<div dojoType="dijit.layout.ContentPane" title="رابط" closable="true" href="layout/doc0.html"></div>
			<div dojoType="dijit.Tree" model="continentModel" openOnClick="true" title="עץ" closable="true"></div>
		</div>
	</div>

	<div id="left" dir="ltr" lang="en-us" style="width: 500px; float: left;">
		<h2>LTR</h2>

		<div dojoType="dijit.Toolbar"
				><div dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconCut" showLabel="false">Cut</div
				><div dojoType="dijit.form.DropDownButton" iconClass="plusIcon" showLabel="true">
					<span>TooltipDialog</span>
					<div dojoType="dijit.TooltipDialog" title="Enter Login information">
						<table>
							<tr>
								<td><label for="user">Name:</label></td>
								<td><input dojoType=dijit.form.TextBox></td>
							</tr>
							<tr>
								<td><label for="pwd">Date:</label></td>
								<td><input dojoType=dijit.form.DateTextBox></td>
							</tr>
							<tr>
								<td><label for="pwd">Age:</label></td>
								<td><input dojoType=dijit.form.NumberSpinner></td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<button dojoType=dijit.form.Button type="submit" name="submit">Login</button></td>
							</tr>
						</table>
					</div
				></div
				><div dojoType="dijit.form.DropDownButton" iconClass="dijitEditorIcon dijitEditorIconBackColor" showLabel="true">
					<span>ColorPalette</span>
					<div dojoType="dijit.ColorPalette" style="display: none" palette="7x10" onChange="console.log(this.value);"></div>
				</div
				><div dojoType="dijit.form.ComboButton" optionsTitle='save options' iconClass="plusIcon" showLabel="true">
					<span>Menu</span>
					<div dojoType="dijit.Menu" style="display: none;">
						<div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconSave">Save</div>
						<div dojoType="dijit.MenuItem">Save As</div>
						<div dojoType="dijit.PopupMenuItem">
							<span>Enabled Submenu</span>
							<div dojoType="dijit.Menu">
								<div dojoType="dijit.MenuItem">Submenu Item One</div>
								<div dojoType="dijit.MenuItem">Submenu Item Two</div>
								<div dojoType="dijit.PopupMenuItem">
									<span>Deeper Submenu</span>
									<div dojoType="dijit.Menu">
										<div dojoType="dijit.MenuItem">Sub-sub-menu Item One</div>
										<div dojoType="dijit.MenuItem">Sub-sub-menu Item Two</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div
		></div>

		<div dojoType="dijit.layout.TabContainer" style="width: 450px; height: 300px; margin-top: 1em;">
			<div dojoType="dijit.layout.ContentPane" title="Href" closable="true" href="layout/doc0.html"></div>
			<div dojoType="dijit.Tree" model="continentModel" openOnClick="true" title="Tree" closable="true"></div>
		</div>

	</div>

</body>
</html>
